<!DOCTYPE html>
<!-- saved from url=(0044)http://kenedict.com/networks/worldcup14/vis/ , thanks Andre!-->
<html lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF8" />
    <title>Vis Network | Example Applications | World Cup Network</title>

    <script
      type="text/javascript"
      src="../../../standalone/umd/vis-network.min.js"
    ></script>

    <script src="../datasources/WorldCup2014.js"></script>

    <style type="text/css">
      #mynetwork {
        width: 800px;
        height: 800px;
        border: 1px solid lightgray;
      }
    </style>
  </head>

  <body>
    <h2>Performance - World Cup Network</h2>

    <div style="width: 700px; font-size: 14px">
      This example shows the performance of vis with a larger network. The edges
      in particular (~9200) are very computationally intensive to draw. Drag and
      hold the graph to see the performance difference if the edges are hidden.
      <br /><br />
      We use the following physics configuration: <br />
      <code
        >{barnesHut: {gravitationalConstant: -80000, springConstant: 0.001,
        springLength: 200}}</code
      >
      <br /><br />
    </div>

    <div id="mynetwork"></div>

    <script type="text/javascript">
      var network;

      function redrawAll() {
        // remove positoins
        for (var i = 0; i < nodes.length; i++) {
          delete nodes[i].x;
          delete nodes[i].y;
        }

        // create a network
        var container = document.getElementById("mynetwork");
        var data = {
          nodes: nodes,
          edges: edges,
        };
        var options = {
          nodes: {
            shape: "dot",
            scaling: {
              min: 10,
              max: 30,
            },
            font: {
              size: 12,
              face: "Tahoma",
            },
          },
          edges: {
            width: 0.15,
            color: { inherit: "from" },
            smooth: {
              type: "continuous",
            },
          },
          physics: {
            stabilization: false,
            barnesHut: {
              gravitationalConstant: -80000,
              springConstant: 0.001,
              springLength: 200,
            },
          },
          interaction: {
            tooltipDelay: 200,
            hideEdgesOnDrag: true,
          },
        };

        // Note: data is coming from ./datasources/WorldCup2014.js
        network = new vis.Network(container, data, options);
      }

      redrawAll();
    </script>
  </body>
</html>
